<template>
    <div class="whole">
        <div class="dia">
            <van-search v-model="terminalSn" placeholder="请输入终端编号" shape="round" :show-action="showAction"
                @search="onSearch" class="search">
            </van-search>
            <div class="" @click="onSearch">
                搜索
            </div>
        </div>
        <div class="wrapperCenter">
            <div class="content">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
                    <!-- <van-checkbox-group v-model="terList"> -->
                    <empty v-if="!list.length"></empty>
                    <div class="dis" v-for="(item,index) in list" :key="index">
                        <div class="main" :class="index!=0?'main_top':''">
                            <!-- <van-checkbox :name="item.terminalSn" shape="round"> -->
                            <div class="main_d">

                                <div class=""
                                    style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
                                    <div class="">
                                        <div class="institution">
                                            机构:{{item.channelName}}
                                        </div>
                                        <div class="condition">
                                            激活状态：<span v-if="item.activationStatus==0">未激活</span>
                                            <span v-else-if="item.activationStatus==1">已激活</span>
                                        </div>
                                        <div class="condition">
                                            终端编号:{{item.terminalSn}}
                                        </div>
                                        <div class="condition">
                                            绑定状态:<span v-if="item.terminalStatus==0">入库</span>
                                            <span v-else-if="item.terminalStatus==1">下拨</span>
                                            <span v-else-if="item.terminalStatus==2">绑定</span>
                                            <span v-else-if="item.terminalStatus==3">解绑</span>
                                        </div>
                                        <div class="condition">
                                            押金状态:<span v-if="item.depositStatus==0">未扣费</span>
                                            <span v-else-if="item.depositStatus==1">已扣费</span>
                                        </div>
                                        <div class="condition">
                                            sim卡扣费标识:<span v-if="item.simFlag==0">是</span>
                                            <span v-else-if="item.simFlag==1">否</span>
                                        </div>
                                        <div class="condition">
                                            是否押金:<span v-if="item.depositFlag==0">是</span>
                                            <span v-else-if="item.depositFlag==1">否</span>
                                        </div>
                                        <div class="condition">
                                            是否返现:<span v-if="item.cashbackFlag==0">是</span>
                                            <span v-else-if="item.cashbackFlag==1">否</span>
                                        </div>
                                        <div class="condition" v-if="item.bindingTime">
                                            绑定时间:{{item.bindingTime}}
                                        </div>
                                        <div class="condition" v-else>
                                            绑定时间:暂无
                                        </div>

                                        <!-- <div class="condition">
													费 率:{{item.creditCardTrate}}
												</div> -->
                                    </div>



                                </div>
                                <img src="@/assets/terminal/HK.png" alt="" v-if="channelCode=='CHANNEL_POS_HK_SD'" />
                                <img src="@/assets/terminal/LS.png" alt="" v-if="channelCode=='CHANNEL_POS_LS_SD'" />

                            </div>
                            <div class="remaining dis" @click="copymerchant(item)">
                                复制终端编号
                            </div>
                            <!-- </van-checkbox> -->
                        </div>
                    </div>
                    <!-- </van-checkbox-group> -->
                </van-list>
            </div>
        </div>

        <!-- <div class="wrapperBottom" v-if="list.length">
			<div class="left">
				<van-checkbox @change="checkedAllClick" v-model="checkedAll">全选</van-checkbox>
			</div>
			<div class="right" @click="goBank">已选择{{ terList.length }}台</div>
		</div> -->
    </div>
</template>

<script>
    import {
        selectTerAll
    } from '@/api/terminal'
    import store from '@/store'

    import {
        showToast
    } from 'vant'
    export default defineComponent({
        name: 'sateActive',
        setup() {
            const router = useRoute()
            const routers = useRouter()
            const state = reactive({
                agentNo: "",
                showAction: false,
                terList: [],
                pageStart: 1,
                pageSize: 20,
                loading: false,
                finished: false,
                list: [],
                channelCode: "",
                checkedAll: false,
                channelName: "",
                terminalSn: ""
            })
            //全选按钮
            // const checkedAllClick = e => {
            // 	state.terList = []
            // 	if (e) {
            // 		state.list.forEach(item => {
            // 			console.log(e)
            // 			state.terList.push(item.terminalSn)
            // 		})
            // 	}
            // }
            const onSearch = () => {
                state.pageStart = 1
                state.list = []

                getList()
            }
            //获取数据
            const getList = () => {
                // state.channelCode = router.query.channelCode
                state.channelName = router.query.channelName
                if (router.query.terminalSn) {
                    state.terminalSn = router.query.terminalSn
                }
                let parames = {
                    agentNo: state.agentNo,
                    // channelCode: router.query.channelCode,
                    terminalSn: state.terminalSn,
                    pageStart: state.pageStart,
                    pageSize: state.pageSize
                }
                if (state.terminalSn != '') {
                    parames.terminalSn = state.terminalSn
                }
                selectTerAll(parames).then(res => {
                    if (res.data.records.length != 0) {
                        if (res.data.records.size < 10) {
                            state.finished = true
                            state.loading = false
                        } else {
                            state.pageStart++
                            state.finished = false
                            state.loading = false
                        }
                        state.list = state.list.concat(res.data.records)
                    } else {
                        state.finished = true
                        state.loading = false
                    }

                })
            }
            //复制终端编号
            const copymerchant = (e) => {
                const textarea = document.createElement('textarea');
                textarea.value = e.terminalSn
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                state.show = false
                showToast('复制成功')
            }
            return {
                ...toRefs(state),
                getList,
                onSearch,
                copymerchant
                // checkedAllClick,
                // goBank,
            }
        }
    })
</script>
<style scoped lang="scss">
    .whole {
        height: 100vh;
        background-color: #fff;
        overflow-y: auto;

        .search {
            width: 328px;
            // position: fixed;
            // top: 0;
        }

        .wrapperCenter {
            height: 100vh;
            overflow: scroll;

            .content {

                // padding-bottom:50px;
                // box-sizing: border-box;
                .main {
                    width: 339px;
                    // height: 144px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
                    border-radius: 6px;
                    padding: 10px 10px;
                    box-sizing: border-box;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 12px;
                    color: #333333;
                    margin-top: 12px;

                    img {
                        width: auto;
                        height: 30px;
                    }

                    .main_d {
                        width: 280px;
                        display: flex;
                        justify-content: space-between;

                    }

                    .institution {
                        margin-top: 2px;
                        margin-left: 12px;
                    }

                    .condition {
                        margin-top: 8px;
                        margin-left: 12px;
                    }

                    .remaining {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #ff2828;
                        width: 100%;
                        border-top: 1px solid #F3F3F3;
                        margin-top: 16px;
                        padding: 12px 0px 0px 0px;
                        box-sizing: border-box;
                    }
                }
            }
        }

        .wrapperBottom {
            padding: 14px;
            position: fixed;
            width: 100%;
            bottom: 0;
            background: #ffffff;
            opacity: 1;
            border-radius: 0px;
            display: flex;
            justify-content: space-between;

            .left {
                display: flex;
                align-items: center;
            }

            .right {
                // width: 73px;
                // height: 21px;
                background: #2687FF;
                border-radius: 14px;
                padding: 6px 8px;
                opacity: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                color: #ffffff;
                // border-radius: 5px;
            }
        }
    }

    ::v-deep .van-search__content {
        background-color: #EDF5FF !important;
    }
</style>